<template>
    <div>
        <el-card class="box-card"  style="padding-bottom: 30px">
            <div slot="header" class="clearfix">
                <div class="el-page-header">
                    <div class="el-page-header__left" @click="crud.goBack">
                        <i class="el-icon-back"></i>
                        <div class="el-page-header__title">返回</div>
                    </div>
                    <div class="el-page-header__content" style="font-size: 15px;">导入数据</div>
                </div>
            </div>
            <div class="dataFrom" style="width: 400px;border-right: 1px solid #EBEEF5;display: inline-block">
<!--                <el-row>-->
<!--                    <div style="display: inline-block">批次号: </div>-->
<!--                    <div style="display: inline-block;padding-left: 10px">-->
<!--                        <el-input placeholder="请输入批次号" v-model="batchTag" style="width: 310px"/>-->
<!--                    </div>-->
<!--                </el-row>-->
                <el-row style="margin-top: 20px;">
                    <el-upload ref="upload" action="" class="upload-demo" drag :headers="httpHeaders"
                               :auto-upload="false" multiple :limit="1" :accept="acceptFileType"
                               :on-change="handleUploadChange" :on-exceed="handleExceed" >
                        <i class="el-icon-upload"></i>
                        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                    </el-upload>
                </el-row>
                <el-row style="margin-top: 10px">
                    <p>备注：</p>
                    <p>1、只支持上传.zip、.rar文件，文件大小不超过10MB</p>
                    <p>2、只支持单文件上传</p>
<!--                    <p>3、导入数据只获取文件中第一个sheet内数据</p>-->
<!--                    <p>4、上传文件数据列数与字段必须按文档模板填写</p>-->
<!--                    <p>5、非必填项如果未按字段规则填写则系统取默认值</p>-->
                </el-row>
                <el-row style="margin-top: 10px;text-align: right;margin-right: 40px;">
                    <el-button type="primary" @click="doUpload">确定上传</el-button>
                </el-row>
            </div>
            <div style="display: inline-block;width: 666px;position: absolute;padding: 0px 30px">
                <el-input disabled type="textarea" placeholder="导入失败数据" v-model="uploadErrorData" :rows="10"/>
            </div>
        </el-card>
    </div>
</template>
<script>
    import CRUD, {crud} from '@crud/crud'
    export default {
        name: 'importData',
        components: {},
        mixins: [crud()],
        props:{
          showDetail:{
            type:Object,
            default:null
          },
          uploadErrorData:{
            type:String,
            default: null
          },
          clearuploadErrorData:{
            type:Function,
            default : null
          }
        },
        data() {
            return {
                batchTag: '',
                uploadLoading: false,
                fileList:[],
                httpHeaders:{
                    'Authorization': ''
                },
                acceptFileType:'.zip,.rar,.tar',
            }
        },
        created() {
          this.clearuploadErrorData()
        },
        methods: {
            doUpload() {
                if (this.fileList.length > 0) {
                    this.uploadLoading = true;
                    const formData = new FormData();
                    let params
                    if(this.showDetail){
                      params=this.showDetail
                    }else{
                      params=this.crud.selections[0]
                    }
                    formData.append('file', this.fileList[0].raw);
                    formData.append("pkId", params.pkId);
                    formData.append("appCode", params.appCode);
                    formData.append("verCode", params.verCode);
                    this.crud.doupload(formData);
                } else {
                    this.$notify.error({title: '错误',
                        message: '请选择导入的文件!'
                    });
                };
            },
            handleUploadChange(file, fileList) {
                this.fileList = fileList;
                var fileName = file.name.substring(file.name.lastIndexOf('.') + 1);
                if (fileName != 'zip' && fileName != 'rar') {
                    this.beforUploadJobError("只能上传.zip、.rar类型的压缩包!");
                    this.$refs['upload'].clearFiles();
                    return false;
                }
                //读取文件大小
                var fileSize = file.size;
                if (fileSize > 10485760) {
                    this.beforUploadJobError("选择的文件大小不能超过10M");
                    this.$refs['upload'].clearFiles();
                    return false;
                }
                if(this.batchTag == null || this.batchTag == ''){
                    this.batchTag = this.$moment(new Date()).format("YYYY-MM-DD");
                }
                return true;
            },
            beforUploadJobError(msg){
                this.$notify.error({
                    title: '错误',
                    message: msg
                });
            },
            handleExceed(files, fileList){
                this.$notify.error({title: '提示', message: '只支持单个文件上传!'});
            },
        }
    }
</script>
